<template>
  <div class="disperse">
    <h1>分散式添加房源</h1>

    <el-form ref="form" :model="form" :inline="true" class="demo-form-inline" label-width="80px">
      <el-form-item label="*楼盘名称">
        <el-input v-model="formname" />
      </el-form-item>
      <el-form-item label="">
        <el-button type="info" @click="getLps">信息按钮</el-button>
      </el-form-item>
      <el-form-item label=" ">
        <el-radio-group v-model="form.publishStatus">
          <el-radio label="0" @change="changeIsShow2">整租</el-radio>
          <el-radio label="1" @change="changeIsShow1">合租</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label=" ">
        <el-radio-group v-model="form.type">
          <el-radio :label="3">已出租</el-radio>
          <el-radio :label="6">未出租</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>

      <el-form-item label="楼栋号">
        <el-input v-model="form.buildingNo" placeholder="楼栋号" />
      </el-form-item>
      <el-form-item label="单元号">
        <el-input v-model="form.unitNo" placeholder="单元号" />
      </el-form-item>
      <el-form-item label="门牌号">
        <el-input v-model="form.roomNo" placeholder="门牌号" />
      </el-form-item>
      <br>

      <el-form-item label="*户型">
        <el-select v-model="form.room" style="width: 4rem;" placeholder="">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
          <el-option label="7" value="7" />
          <el-option label="8" value="8" />
          <el-option label="9" value="9" />
        </el-select>室
        <el-select v-model="form.hall" style="width: 4rem;" placeholder="">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
          <el-option label="7" value="7" />
          <el-option label="8" value="8" />
          <el-option label="9" value="9" />
        </el-select>厅
      </el-form-item>
      <el-form-item label=" " />
      <el-form-item label=" " />
      <el-form-item label="装修情况">
        <el-select v-model="form.decorate" style="width: 6rem;" placeholder="">
          <el-option label="精装" value="精装" />
          <el-option label="简装" value="简装" />
          <el-option label="毛胚" value="毛胚" />
        </el-select>
      </el-form-item>
      <br>

      <el-form-item label="*楼层">
        <el-input v-model="form.floor" placeholder="楼层" />
      </el-form-item>共
      <el-form-item label="">
        <el-input v-model="form.floorCount" placeholder="层" />
      </el-form-item>层
      <br>

      <el-form-item label="*设置管家">
        <el-select v-model="form.manager">
          <el-option v-for="item in gjs" :key="item.userId" :label="item.username" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item label="" style="color: darkorange;">您还可以在系统设置中添加其他管家</el-form-item>
      <br>

      <el-form-item label="*房产面积">
        <el-input v-model="form.createBy" placeholder="房产面积" />
      </el-form-item>
      <br>

      <el-form-item v-show="isShow" label="*租金">
        <el-input v-model="form.rental" placeholder="租金" />
      </el-form-item>
      <el-form-item label=" " />
      <el-form-item label=" " />
      <el-form-item label="*付款方式">
        <el-select v-model="form.paymentMortgage" style="width: 4rem;" placeholder="">
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
        </el-select>押
        <el-select v-model="form.paymentPay" style="width: 4rem;" placeholder="">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
        </el-select>付
      </el-form-item>
      <br>

      <el-form-item label="*公共配套">
        <el-checkbox-group v-model="form.publicFacility">
          <el-checkbox v-for="gg in ggs" :key="gg.id" :label="gg.id">{{ gg.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <br>
      <el-form-item v-show="isShow" label="*房间配套">
        <el-checkbox-group v-model="form.privateFacility">
          <el-checkbox v-for="gg in fangs" :key="gg.id" :label="gg.id">{{ gg.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <br>
      <el-form-item label="公共区域图片">

        <el-upload
          action="http://localhost/api/sys/wish/upload/pic"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>

      </el-form-item>
      <br>
      <el-form-item label="公共区域图片">

        <el-upload
          action="http://localhost/api/sys/wish/upload/pic"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>

      </el-form-item>
      <br>

      <el-form-item label="*房源介绍">
        <el-input v-model="form.introduce" type="textarea" autosize placeholder="请输入内容" />
      </el-form-item>
      <br>
      <el-button v-show="isShow===false" type="success" icon="el-icon-edit" @click="toadd">添加房间</el-button><br><br>
      <el-form-item>
        <el-button type="primary" @click="save">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 弹出楼盘 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

      <el-form :inline="true" :model="pageInfo" class="demo-form-inline">
        <el-form-item label="楼盘名称">
          <el-input v-model="pageInfo.lname" placeholder="楼盘名称" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="sousuo">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />

        <el-table-column prop="id" label="编号" width="120" />
        <el-table-column prop="name" label="楼盘名称" width="120" />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        :page-count="pageInfo.pageCount"
        :current-page="pageInfo.currPage"
        @current-change="pageChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      isShow: true,
      pageInfo: {
        pageSize: 10,
        total: 1.0,
        pageCount: 10,
        pageNum: 1,
        lname: ''
      },
      formname: '',
      form: {
        leaseType: null,
        publicFacility: [],
        privateFacility: [],
        createBy: '',
        radio: null,
        premisesId: '',
        buildingNo: '',
        unitNo: '',
        roomNo: '',
        floor: '',
        decorate: '',
        room: '',
        hall: '',
        floorCount: '',
        manager: '',
        proportion: '',
        paymentMortgage: '',
        paymentPay: '',
        introduce: ''

      },
      ggs: [],
      fangs: [],
      gjs: [],
      lps: [],
      dialogVisible: false
    }
  },
  created() {
    this.getFjs()
    this.getGgs()
    this.getGjs()
  },
  methods: {
    handleClick(row) {
      this.dialogVisible = false
      this.form.premisesId = row.id
      this.formname = row.name
    },
    onSubmit() {
      console.log('submit!')
    },
    getGgs() {
      this.axios.get('http://localhost/api/house/premises-info/getGg').then(res => {
        this.ggs = res.data
      })
    },
    getFjs() {
      this.axios.get('http://localhost/api/house/premises-info/getFj').then(res => {
        this.fangs = res.data
      })
    },
    getGjs() {
      this.axios.get('http://localhost/api/house/premises-info/getGj').then(res => {
        this.gjs = res.data
      })
    },
    getLps() {
      this.dialogVisible = true
      this.axios.post('http://localhost/api/house/premises-info/getLp', this.pageInfo).then(res => {
        this.tableData = res.data.records

        this.pageInfo.pageSize = res.data.size
        this.pageInfo.total = res.data.total
        this.pageInfo.pageCount = res.data.pages
        this.pageInfo.pageNum = res.data.current
      })
    },
    pageChange(val) {
      this.pageInfo.pageNum = val
      this.getLps()
    },
    sousuo() {
      this.pageInfo.pageNum = 1
      this.getLps()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClose() {

    },
    changeIsShow1() {
      this.isShow = !this.isShow
    },
    changeIsShow2() {
      this.isShow = true
    },
    save() {
      this.axios.post('http://localhost/api/house/house-info/insert', this.form).then(res => {
        if (res.data) {
          this.$alert('添加成功!')
          this.$router.go(-1)
        }
      })
    },
    handlePictureCardPreview(res) {
      this.form.dialogImageUrl.push(res.obj)
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
